<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="myXHR()"></button>
  </body>
  <script>
    const SERVER_URL = "http://127.0.0.1:3000/my/test";
    function myXHR() {
      let xhr = new XMLHttpRequest();
      // 创建 Http 请求
      xhr.open("GET", SERVER_URL, true);
      // 设置状态监听函数
      xhr.onreadystatechange = function () {
        console.log(this);
        if (this.readyState !== 4) return;
        // 当请求成功时
        if (this.status === 200) {
          handle(this.response);
        } else {
          console.error(this.statusText);
        }
      };
      // 设置请求失败时的监听函数
      xhr.onerror = function () {
        console.error(this.statusText);
      };
      // 设置请求头信息
      xhr.responseType = "json";
      xhr.setRequestHeader("Accept", "application/json");
      // 发送 Http 请求
      xhr.send(null);
      console.log(res);
    }
    // 处理响应数据的函数
    function handle(data) {
      console.log("响应数据:", data);
      // 这里可以根据返回的数据进行进一步处理
      // 例如：如果返回的是 { info: "111" }
      if (data.info) {
        console.log("info:", data.info); // 输出: info: 111
      }
    }

    // 	1.	fetch 返回的是一个 Response 对象，它包含了请求的响应信息（如状态码、响应头、响应体等）。这时你需要提取出响应体的内容（例如：JSON 数据）。
    // 2.	response.json() 是一个异步方法，它会解析响应体中的 JSON 数据并返回一个 Promise。这个 Promise 会在解析完成后返回实际的 JSON 数据。
    // 3.	return response.json() 将 response.json() 返回的 Promise 传递到下一个 .then()，从而让下一个 .then() 能够处理最终的数据。
    //fetch
    fetch(SERVER_URL, {})
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        console.log(data);
      });
  </script>
</html>
